<template>
	<!-- 轮播 -->
	<view class="swiper-view swiper">
		<swiper :duration="1000" :circular="true" @change="changeCurrent">
			<block v-for="(item,index) in goods.goods_banner" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<image class="imageUrl" :src="item.image" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<!-- 左边自定义指示点  -->
		<view class="point">{{current}}/{{banner_length}}</view>
	</view>

	<!-- 有秒杀就显示 -->
	<view class="seckill" v-if="seckill_display">
		<view class="seckill-top seckill-flex">
			<text>秒杀中</text>
			<text class="seckill-center">已售 {{goods.sold}}</text>
			<text>距离结束还有:</text>
		</view>
		<view class="seckill-flex">
			<text class="price-spike">¥{{seckill[0].seckill_price}}</text>
			<text class="seckill-center original-price">¥{{seckill[0].original_price}}</text>
			<view class="seckill-time">
				<text v-if="day != '00'">{{day}}</text>
				<text v-if="day != '00'">天</text>
				<text>{{hour}}</text>
				<text>:</text>
				<text>{{minute}}</text>
				<text>:</text>
				<text>{{second}}</text>
			</view>
		</view>
	</view>

	<!-- 没有秒杀就显示普通价格 -->
	<view class="price-view" v-else>
		<view>¥{{goods.goods_price}}</view>
		<view>已售 {{goods.sold}}</view>
	</view>

	<!-- 标题 -->
	<view class="detail-title overflow">&nbsp;&nbsp; {{goods.goods_title}}</view>

</template>

<script setup>
	import { defineProps, watch, ref, reactive, toRefs, onBeforeUnmount } from 'vue'
	import { Order } from '@/public/package-js/passValue.js'

	// 获取接收父组件传来的值
	const props = defineProps({
		goods: Object, // 商品数据 横幅 标题等
		seckill: Array // 商品秒杀数据
	})

	const data = reactive({
		banner_length: 0, // 轮播图片的总长度（总张数）
		current: 1, // 当前是第几张图片，用于自定义指示点显示
		seckill_display: false, // 是否显示秒杀
		day: '00', //倒计时的剩余天
		hour: '00',
		minute: '00',
		second: '00',
		clearTimeName: '' // 存放销毁定时器的名字
	})

	const { banner_length, current, seckill_display, day, hour, minute, second } = toRefs(data)

	// 1、改变当前轮播图片触发
	function changeCurrent(e) {
		data.current = e.detail.current + 1
	}

	// 2、监听父组件传来的值（父子组件传值往往会出现异步的问题，所以用监听器）
	watch(props, (newVal, oldVal) => {
		const newProps = JSON.parse(JSON.stringify(newVal)) //深拷贝 否则会影响父组件其余的子组件的监听器也变化
		// console.log("传值666",newProps);

		// 轮播图的长度
		data.banner_length = newProps.goods.goods_banner.length

		// 判断是否有秒杀
		if (newProps.seckill.length === 0) {
			// 没有秒杀
			data.seckill_display = false
			// 原价赋值
			Order.order.goods_price = newProps.goods.goods_price
			Order.exist_seckill = false

		} else {
			// 有秒杀，判断是否开始	
			// 数据库返回秒杀的开始时间
			let start_Time = newProps.seckill[0].seckill_time.start_Time
			// 数据库返回的秒杀结束时间
			let end_Time = newProps.seckill[0].seckill_time.end_Time

			// 判断数据库返回的开始时间是否大于当前时间，如果大于：秒杀还没开始
			if (start_Time > new Date().getTime()) {
				// console.log('有秒杀，未开始')
				data.seckill_display = false
				
				// 未开始也是原价
				Order.order.goods_price = newProps.goods.goods_price
				Order.exist_seckill = false

			} else {
				// console.log('有秒杀已开始')
				// 传递秒杀的信息
				countDown(newProps.seckill[0], end_Time)
			}
		}
	})


	// 2-1 计算倒计时
	function countDown(seckillInfo, end_Time) {
		// 利用定时器每一秒开始计算
		let time = setInterval(() => {
			// 秒杀结束时间-当前时间 = 剩余毫秒数
			let surplusTime = end_Time - new Date().getTime()

			let days = parseInt(surplusTime / 1000 / 60 / 60 / 24) //剩余的天数
			let hours = parseInt(surplusTime / 1000 / 60 / 60 % 24) //剩余的小时
			let minutes = parseInt(surplusTime / 1000 / 60 % 60) //剩余的分钟数
			let seconds = parseInt(surplusTime / 1000 % 60) //剩余的秒数

			days = formatTime(days)
			hours = formatTime(hours)
			minutes = formatTime(minutes)
			seconds = formatTime(seconds)

			if (surplusTime > 0) {
				// 秒杀剩余时间大于0 显示秒杀
				data.seckill_display = true
				data.day = days
				data.hour = hours
				data.minute = minutes
				data.second = seconds
				
				// 下单的价格显示秒杀价
				Order.order.goods_price = seckillInfo.seckill_price
				Order.exist_seckill = true
				
			} else {
				// 秒杀结束
				// console.log('秒杀结束')
				data.seckill_display = false
				
				// 秒杀结束，显示原价
				Order.order.goods_price = seckillInfo.original_price
				Order.exist_seckill = false
				
				// 销毁定时器
				clearInterval(time)
			}
		}, 1000)
		// 将定时器名字存起来
		data.clearTimeName = time

	}
	
	// 2-2 格式化时间 1 ==> 01
	function formatTime(i) {
		if (i < 10) {
			i = '0' + i
		}
		return i
	}
	

	// 3 销毁：返回上一页面停止定时器
	onBeforeUnmount(() => {
		if(data.clearTimeName){
			clearInterval(data.clearTimeName)
		}
	})
</script>

<style scoped>
	.imageUrl {
		width: 100%;
		height: 700rpx !important;
	}

	.swiper-view {
		height: 700rpx !important;
		position: relative;
	}

	.point {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		background-color: #333333;
		opacity: 0.5;
		color: #FFFFFF;
		font-size: 25rpx;
		width: 100rpx;
		height: 50rpx;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	/* 价格 */
	.price-view {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 100rpx;
	}

	.price-view view:nth-child(1) {
		color: #e9445a;
		font-size: 40rpx;
		font-weight: bold;
	}

	.price-view view:nth-child(2) {
		color: #b1b2b5;
	}

	/* 秒杀 */
	.seckill {
		background-color: #e74e64;
		padding: 10rpx 20rpx;
		margin-bottom: 0rpx;
		color: #ffffff;
	}

	.seckill-flex {
		display: flex;
		align-items: center;
	}

	.seckill-center {
		flex: 1;
		padding: 0 20rpx;
	}

	.seckill-top {
		padding-bottom: 10rpx;
		font-size: 25rpx;
	}

	.seckill-top text:nth-child(1) {
		background-color: #f6d3db;
		padding: 5rpx 15rpx;
		color: #ea4163;
		border-radius: 5rpx;
	}

	.seckill_price {
		font-size: 35rpx;
		font-weight: bold;
	}

	.original-price {
		text-decoration: line-through;
		color: #f1b0be;
	}

	.seckill-time {
		display: flex;
		align-items: center;
	}

	.seckill-time text {
		margin-left: 10rpx;
	}

	.seckill-time text:nth-child(odd) {
		background-color: #eb6578;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
	}

	/* 标题 */
	.detail-title {
		padding: 10rpx;
		line-height: 1.5;
		background-color: #FFFFFF;
		margin: 20rpx 0 0 0;
	}
</style>
